<template>
  <div class="content">
    <el-dialog v-model="dialogCustomer" title="客户信息编辑" width="800">
      <div class="dialog">
        <div class="title">
          <div class="line"></div>
          <div>基础信息</div>
        </div>
        <el-form :model="form" label-width="90">
          <div style="display: flex; justify-content: space-between">
            <el-form-item label="公司名称:" required label-position="top">
              <el-input
                placeholder="请输入公司名称"
                v-model="form.name"
                autocomplete="off"
                maxlength="50"
                show-word-limit
                style="width: 360px"
              />
            </el-form-item>
            <el-form-item label="所在地区:" label-position="top">
              <el-select
                v-model="form.region"
                placeholder="请选择"
                style="width: 360px"
              >
                <el-option label="Zone No.1" value="shanghai" />
                <el-option label="Zone No.2" value="beijing" />
              </el-select>
            </el-form-item>
          </div>
          <div style="display: flex; justify-content: space-between">
            <el-form-item label="法定代表人:" required label-position="top">
              <el-input
                placeholder="请输入法定代表人姓名"
                v-model="form.name"
                autocomplete="off"
                maxlength="10"
                show-word-limit
                style="width: 360px"
              />
            </el-form-item>
            <el-form-item label="联系电话:" required label-position="top">
              <el-input
                placeholder="请输入联系电话"
                v-model="form.phone"
                autocomplete="off"
                maxlength="11"
                show-word-limit
                style="width: 360px"
              />
            </el-form-item>
          </div>
        </el-form>
        <div class="title">
          <div class="line"></div>
          <div>工商信息</div>
        </div>
        <el-form :model="form" label-width="90">
          <div style="display: flex; justify-content: space-between">
            <el-form-item label="社会统一信用代码：" label-position="top">
              <el-input
                placeholder="请输入公司名称"
                v-model="form.name"
                autocomplete="off"
                maxlength="18"
                show-word-limit
                style="width: 360px"
              />
            </el-form-item>
            <el-form-item label="成立时间：" label-position="top">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="请选择"
                :size="size"
                style="width: 360px"
              />
            </el-form-item>
          </div>
          <div style="display: flex; justify-content: space-between">
            <el-form-item label="员工规模:" label-position="top">
              <el-input
                placeholder="请输入"
                v-model="form.name"
                autocomplete="off"
                show-word-limit
                type="number"
                style="width: 360px"
              />
            </el-form-item>
            <el-form-item label="参保人数:" label-position="top">
              <el-input
                placeholder="请输入"
                v-model="form.phone"
                autocomplete="off"
                type="number"
                show-word-limit
                style="width: 360px"
              />
            </el-form-item>
          </div>
          <div style="display: flex; justify-content: space-between">
            <el-form-item label="注册资本:" label-position="top">
              <el-input
                style="width: 360px"
                placeholder="请输入"
                v-model="form.name"
                autocomplete="off"
              >
                <template #append>万元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="所属行业:" label-position="top">
              <el-select
                v-model="form.region"
                placeholder="请选择"
                style="width: 360px"
              >
                <el-option label="Zone No.1" value="shanghai" />
                <el-option label="Zone No.2" value="beijing" />
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="注册地址:" label-position="top">
            <el-input
              placeholder="请输入"
              v-model="form.phone"
              autocomplete="off"
              show-word-limit
              maxlength="100"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="经营范围:" label-position="top">
            <el-input
              placeholder="请输入"
              v-model="form.phone"
              autocomplete="off"
              show-word-limit
              maxlength="500"
              style="width: 100%"
              type="textarea"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogFollowup = false">
            确定
          </el-button>
          <el-button @click="dialogFollowup = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const dialogCustomer = ref(false);
const form = reactive({
  name: "",
  phone: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: ""
});
</script>

<style scoped lang="scss">
.dialog {
  .title {
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .line {
      width: 4px;
      height: 15px;
      border-radius: 5px;
      background-color: #409eff;
      margin-right: 10px;
    }
  }
}
</style>
